class Navigation {
    constructor() {
        this.panels = {
            'device-status': document.querySelector('.device-status-panel'),
            'real-time-moisture': document.querySelector('.real-time-moisture-panel'),
            'moisture-trend': document.querySelector('.moisture-trend-panel'),
            'layered-monitoring': document.querySelector('.layered-monitoring-panel'),
            'area-distribution': document.querySelector('.area-distribution-panel'),
            'realtime-monitoring': document.querySelector('.realtime-monitoring-panel'),
            'remote-control': document.querySelector('.remote-control-panel'),
            'fertilizer-plan': document.querySelector('.fertilizer-plan-panel'),
            'irrigation-plan': document.querySelector('.irrigation-plan-panel'),
            'smart-irrigation': document.querySelector('.smart-irrigation-panel')
        };
        
        this.currentPanel = 'real-time-moisture';
        this.initEventListeners();
        
        // 初始化时设置实时墒情为活动状态
        this.initializeActivePanel();
    }

    initializeActivePanel() {
        // 移除所有菜单项的活动状态
        document.querySelectorAll('.menu-items li').forEach(item => {
            item.classList.remove('active');
        });

        // 找到实时墒情菜单项并设置为活动状态
        const menuItems = document.querySelectorAll('.menu-items li');
        menuItems.forEach(item => {
            if (item.textContent.trim() === '实时墒情') {
                item.classList.add('active');
            }
        });

        // 显示实时墒情面板
        this.switchPanel('real-time-moisture');
    }

    initEventListeners() {
        // 为所有菜单项添加点击事件
        const menuItems = document.querySelectorAll('.menu-items li');
        menuItems.forEach(item => {
            item.addEventListener('click', () => {
                // 移除所有活动状态
                menuItems.forEach(i => i.classList.remove('active'));
                // 添加当前项的活动状态
                item.classList.add('active');
                
                // 根据点击的菜单项切换面板
                const panelId = this.getPanelId(item.textContent.trim());
                this.switchPanel(panelId);
            });
        });
    }

    getPanelId(menuText) {
        const panelMap = {
            '水肥设备状态': 'device-status',
            '实时墒情': 'real-time-moisture',
            '墒情趋势': 'moisture-trend',
            '分层监测': 'layered-monitoring',
            '区域分布': 'area-distribution',
            '实时数据监测': 'realtime-monitoring',
            '远程控制': 'remote-control',
            '施肥方案': 'fertilizer-plan',
            '施水方案': 'irrigation-plan',
            '智能化灌溉': 'smart-irrigation'
        };
        return panelMap[menuText] || 'real-time-moisture';
    }

    switchPanel(panelId) {
        // 隐藏所有面板
        Object.values(this.panels).forEach(panel => {
            if (panel) {
                panel.style.display = 'none';
            }
        });

        // 显示目标面板
        const targetPanel = this.panels[panelId];
        if (targetPanel) {
            targetPanel.style.display = 'block';
            this.currentPanel = panelId;
            
            // 根据不同面板类型刷新数据
            if (panelId === 'real-time-moisture' && window.realTimeMoisture) {
                window.realTimeMoisture.refreshCharts();
            }
            else if (panelId === 'moisture-trend' && window.moistureTrend) {
                window.moistureTrend.updateData();
            }
            else if (panelId === 'layered-monitoring' && window.layeredMonitoring) {
                window.layeredMonitoring.updateData();
            }
            else if (panelId === 'area-distribution' && window.areaDistribution) {
                window.areaDistribution.updateData();
            }
            else if (panelId === 'device-status' && window.deviceStatus) {
                window.deviceStatus.updateData();
            }
            else if (panelId === 'realtime-monitoring' && window.realtimeMonitoring) {
                window.realtimeMonitoring.updateData();
            }
            else if (panelId === 'remote-control' && window.remoteControl) {
                window.remoteControl.updateDeviceStatus();
            }
            else if (panelId === 'fertilizer-plan' && window.fertilizerPlan) {
                window.fertilizerPlan.updatePlanList();
                window.fertilizerPlan.updateExecutionHistory();
            }
            else if (panelId === 'irrigation-plan' && window.irrigationPlan) {
                window.irrigationPlan.updatePlanList();
                window.irrigationPlan.updateExecutionHistory();
            }
            else if (panelId === 'smart-irrigation' && window.smartIrrigation) {
                window.smartIrrigation.updateData();
            }
        }
    }
}

// 创建导航实例
window.navigation = new Navigation(); 

// 导航逻辑
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有菜单项
    const menuItems = document.querySelectorAll('.menu-items li');
    
    // 获取所有内容面板
    const panels = {
        '实时墒情': document.querySelector('.real-time-moisture-panel'),
        '墒情趋势': document.querySelector('.moisture-trend-panel'),
        '分层监测': document.querySelector('.layered-monitoring-panel'),
        '区域分布': document.querySelector('.area-distribution-panel'),
        '水肥设备状态': document.querySelector('.device-status-panel'),
        '实时数据监测': document.querySelector('.realtime-monitoring-panel'),
        '远程控制': document.querySelector('.remote-control-panel'),
        '施肥方案': document.querySelector('.fertilizer-plan-panel'),
        '施水方案': document.querySelector('.irrigation-plan-panel'),
        '智能化灌溉': document.querySelector('.smart-irrigation-panel')
    };

    // 为每个菜单项添加点击事件
    menuItems.forEach(item => {
        item.addEventListener('click', function() {
            // 移除所有菜单项的active类
            menuItems.forEach(i => i.classList.remove('active'));
            
            // 为当前点击的菜单项添加active类
            this.classList.add('active');
            
            // 获取菜单项文本
            const panelName = this.textContent.trim();
            
            // 隐藏所有面板
            Object.values(panels).forEach(panel => {
                if (panel) {
                    panel.style.display = 'none';
                }
            });
            
            // 显示对应的面板
            if (panels[panelName]) {
                panels[panelName].style.display = 'block';
            }
        });
    });
}); 